<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
    <link rel="stylesheet" href="layui/css/layui.css">
	<script type="text/javascript" src="layui/layui.js"></script>
	<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
		<button type="button" class="layui-btn" id="test1">   
		  <i class="layui-icon">&#xe67c;</i>上传图片 
		</button> 
		<img id="imgFace" style="width: 120px" src="" /><br />
<input type="hidden" name="picName" id="picName" value="" class="layui-input">
	
	<script type="text/javascript">
	layui.use(['upload','layer'], function(){
		  var upload = layui.upload,layer=layui.layer;
		   
		  //执行实例
		  var uploadInst = upload.render({
		    elem: '#test1' //绑定元素
		    //,url: '../TestServlet?req=upload' //上传接口
		    ,url: 'http://localhost:8080/Dreamcontrol/ImageServlet?req=upload' //上传接口
		    ,done: function(res){
		    	 //回显图片
		    	  layer.msg(res.message,{icon:6});
		    	  $("#imgFace").attr("src","../upload/"+res.message);
		    	  //保存名字
		    	  $("#picName").val(res.remark);
		    }
		    ,error: function(){
		    }
		  });
		});
	</script>
</body>
</html>